<template>
	<div class="good-list-wrap">
		<van-nav-bar :title="pageTitle" left-arrow fixed @click-left="onClickLeft" />
		<div class="tab-ul">
			<div @click="handleToCurrent(0)" :class="['tab-li', current === 0 ? 'on' : '']">综合</div>
			<div @click="handleToCurrent(1)" :class="['tab-li', current === 1 ? `on ${sortStatus}` : 'default']">销量
			</div>
			<div @click="handleToCurrent(2)" :class="['tab-li', current === 2 ? 'on' : '']">最新</div>
			<div @click="handleToCurrent(3)" :class="['tab-li', current === 3 ? `on ${sortStatus}` : 'default']">价格
			</div>
		</div>



		<van-list v-model="loadingPage" :finished="finished" :finished-text="list.length ? '没有更多了' : ''"
			@load="ajaxGoodList" :immediate-check="false">

			<div v-if="finished && !list.length" class="empty-good">
				<van-empty description="暂无商品" />
			</div>

			<!-- 商品列表 -->
			<div class="good-ul">
				<goodItem v-for="(item, index) in list" :key="index" :item="item"></goodItem>
			</div>

		</van-list>

	</div>
</template>

<script>
import { searchLeftArrow, searchHistoryIcon, sortDefault, sortDown, sortUp } from '@/tool/static-img';
import goodItem from './components/good-item';
import { GOOD_LIST } from '@/api/home';
export default {
	components: {
		goodItem
	},
	data() {
		return {
			searchLeftArrow, searchHistoryIcon,
			sortDefault, sortDown, sortUp,
			current: 0,
			cate_id: this.$route.query.cate_id,
			sortStatus: 'default',
			localStorageHistory: [],


			// 分页
			page: 1,
			pageSize: 20,
			list: [],
			loadingPage: false,
			finished: false,
		}
	},
	activated() {
		this.type = this.$route.query.type;
		this.pageTitle = localStorage.getItem('shopName')
	},
	beforeRouteEnter(to, from, next) {
		next(vm => {
			if (from.name == 'home' || from.name=='shopSettleVoiceDevice' || from.name==null) {
				vm.resetInit();
			}
		})
	},
	methods: {
		onClickLeft() {
			this.$router.back()
		},
		// 切换tab
		handleToCurrent(index) {
			if (this.current == index && (index == 0 || index == 2)) {
				return
			}
			if (this.current == index && (index == 1 || index == 3)) {
				if (this.sortStatus == 'default') {
					this.sortStatus = 'sortDown';
				} else if (this.sortStatus == 'sortDown') {
					this.sortStatus = 'sortUp';
				} else if (this.sortStatus == 'sortUp') {
					this.sortStatus = 'default';
				}
			} else {
				this.sortStatus = 'default';
			}

			this.current = index;


			// 数据请求
			this.resetInit();
		},
		resetInit() { //重置
			this.page = 1;
			this.list = [];
			this.finished = false;

			this.loadingPage = true;
			this.ajaxGoodList()
		},
		// 列表请求
		ajaxGoodList() {
			let params = {};
			params['page_num'] = this.page;
			params['page_size'] = this.pageSize;
			if (this.$route.query.jump_content == 'goods_list_type') {
				params['type'] = this.$route.query.type
			} else if (this.$route.query.jump_content == 'goods_list_flag') {
				params['flag'] = this.$route.query.type

			}
			params['sort_type'] = this.current + 1;

			if ((this.current == 1 || this.current == 3) && this.sortStatus != 'default') {
				if (this.sortStatus == 'sortUp') {
					params['sort_rule'] = 1;
				} else if (this.sortStatus == 'sortDown') {
					params['sort_rule'] = 0;
				}
			}

			this.$http.post(GOOD_LIST, params)
				.then(res => {
					const {
						list
					} = res.data;

					if (list && list.length) {
						this.page++;
						this.list = this.list.concat(list);
						this.loadingPage = false;
						if (list.length < this.pageSize) {
							this.finished = true;
						}
					} else {
						this.finished = true;
					}
				})
		}
	}
}
</script>

<style lang="scss">
.good-list-wrap {
	padding-top: 46px;
	min-height: 100vh;
	background-color: #f5f5f5;
	box-sizing: border-box;

	.van-nav-bar .van-icon {
		color: #333333;
	}

	.tab-ul {
		display: flex;
		height: 0.92rem;
		background-color: #fff;

		.tab-li {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			flex: 1;
			font-weight: 400;
			font-size: 0.32rem;
			color: #999999;

			&.on {
				font-weight: 500;
				font-size: 0.32rem;
				color: #31A653;
			}

			&.default {
				&::before {
					content: '';
					position: absolute;
					top: 0;
					bottom: 0;
					right: 0.4rem;
					margin: auto;
					width: 0.14rem;
					height: 0.2rem;
					background: url('../../images/sort-default.png') no-repeat center;
					background-size: cover;
				}
			}

			&.sortDown {
				&::before {
					content: '';
					position: absolute;
					top: 0;
					bottom: 0;
					right: 0.4rem;
					margin: auto;
					width: 0.14rem;
					height: 0.2rem;
					background: url('../../images/sort-down.png') no-repeat center;
					background-size: cover;
				}
			}

			&.sortUp {
				&::before {
					content: '';
					position: absolute;
					top: 0;
					bottom: 0;
					right: 0.4rem;
					margin: auto;
					width: 0.14rem;
					height: 0.2rem;
					background: url('../../images/sort-up.png') no-repeat center;
					background-size: cover;
				}
			}
		}
	}

	.empty-good {
		padding-top: 1rem;
	}

	.good-ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 0.24rem 0.24rem 0;

	}

}
</style>